<script setup>
  import { defineProps } from 'vue'
  const props = defineProps({
    span: {
      type: Number,
      default: 1
    },
    label: {
      type: String,
      default: ''
    },
    labelStyle: {
      type: Object,
      default: () => {}
    }
  })
</script>

<template>
  <div class="cus-descriptions-item">
    <div class="label" :style="labelStyle">
      <slot name="label">{{ label }}</slot>
    </div>
    <div class="value">
      <slot>222</slot>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .cus-descriptions-item {
    grid-column-start: span v-bind('props.span');
    display: flex;
    .label {
      width: 100px;
      min-width: 100px;
      padding: 12px 16px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #f2f3f5;
      font-weight: bold;
      font-size: 14px;
      border-right: 1px solid #e5e6eb;
      border-bottom: 1px solid #e5e6eb;
      word-break: break-all;
      text-align: center;
      box-sizing: border-box;
    }
    .value {
      flex: 1;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      border-right: 1px solid #e5e6eb;
      border-bottom: 1px solid #e5e6eb;
      box-sizing: border-box;
      min-width: 100px;
      :deep(.t-form__item) {
        width: 100%;
      }
    }
  }
</style>
